<template>
	<view class="applicants-detail">
		<!-- 头像 -->
		<view class="face">
			<u-avatar :src="info.face" size="120"></u-avatar>
		</view>

		<view class="info">
			<u-cell-group>
				<u-cell title="姓名"></u-cell>
				<u-cell title="年龄" value="新版本"></u-cell>
				<u-cell title="身高" value="新版本"></u-cell>
				<u-cell title="体重" value="新版本"></u-cell>
				<u-cell title="学历" value="新版本"></u-cell>
				<u-cell title="职业" value="新版本"></u-cell>
				<u-cell title="籍贯" value="新版本"></u-cell>
				<u-cell title="工作城市" value="新版本"></u-cell>
				<u-cell title="有车" value="新版本"></u-cell>
				<u-cell title="有房" value="新版本"></u-cell>
				<u-cell title="家庭成员情况" value="新版本"></u-cell>
			</u-cell-group>
		</view>

		<u-cell-group style="margin-top: 20rpx;">
			<u-button type="success" shape="circle">同意交换微信</u-button>
		</u-cell-group>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				info: {}
			}
		},
		onLoad(options) {
			this.matchmakingId = options.matchmakingId || ''
			this.loadApplicants()
		},
		methods: {
			loadApplicants() {

			}
		}
	}
</script>
<style lang="scss" scoped>
	.applicants-detail {
		background-color: #f8f8f8;
		padding: 20rpx;

		.face {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 50rpx;
		}

		.info {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
		}
	}

	.custom-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.applicant-item {
		display: flex;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s;
		justify-content: space-between;

		>* {
			flex: 1;
		}
	}

	.applicant-item:active {
		background-color: #f5f5f5;
	}

	.item-content {
		display: flex;
		margin-bottom: 20rpx;
		align-items: center;
	}

	.avatar-container {
		margin-right: 20rpx;
	}

	.applicant-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between
	}

	.name-line {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.name {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.distance {
		font-size: 24rpx;
		color: #999;
	}

	.job {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 12rpx;
	}

	.details {
		display: flex;
		gap: 20rpx;
	}

	.detail {
		font-size: 24rpx;
		color: #999;
	}

	.action-buttons {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
</style>